<template>
  <div id="detail">
    <nav-bar :actIndex="navIndex" class="nav" @convey="convey"></nav-bar>
    <scroll class="scroll" ref="scroll" @sendOrdinate="sendOrdinate">
      <swiper :img='topImg' ref="swiper"></swiper>
      <info :goods="goods" ref="info"></info>
      <shop :shop="shop" ref="shop"></shop>
      <show :show="show" @imgLoad="imgLoad" ref="show"></show>
      <good-table :paramInfo="paramInfo" ref="table"></good-table>
      <good-comment :comment="comment" ref="comment"></good-comment>
      <recommend :goodsData="recommend" ref="recommend"></recommend>
    </scroll>
    <back @click.native="backTop" v-show="backShow"></back>
    <bar @addGoods="addGoods" @sendGoodToBuy="sendGoodToBuy"></bar>
  </div>
</template>

<script>
  import navBar from './components/detailNav.vue'
  import swiper from './components/detailSwiper.vue'
  import info from './components/detailInfo.vue'
  import shop from './components/detailShop.vue'
  import show from './components/detailShow.vue'
  import goodTable from './components/detailTable.vue'
  import goodComment from './components/detailComment.vue'
  import bar from './components/detailBar.vue'
  import scroll from 'components/common/scroll/scroll.vue'
  import toast from 'components/common/toast'
  import recommend from 'components/content/Goods/goodsList.vue'
  import {debounce} from 'common/utils.js'
  import {itemLitsenerMixin,backTopMixin} from 'common/mixin.js'
  import {detailGetData,Goods,Shop,GoodsParam,detailGetRecommend} from 'network/data/detail.js'
<<<<<<< HEAD
  import {carPostData} from 'network/car/emit.js'
=======
>>>>>>> 84093be (second)
  import {mapActions} from 'vuex'
  export default{
    name:'detail',
    data(){
      return {
        id:null,
        topImg:[],
        goods:{},
        shop:{},
        data:{},
        show:{},
        paramInfo:{},
        destination:[],
        destinationY:[],
        comment:{},
        recommend:[],
        navIndex:0,
        num:1
      }
    },
    methods:{
      ...mapActions({
        addCar:'addGoods'
      }),
      getDestination(){
        this.destination.push(this.$refs.swiper)
        this.destination.push(this.$refs.table)
        this.destination.push(this.$refs.comment)
        this.destination.push(this.$refs.recommend)
        for(let i in this.destination){
          this.destinationY.push(this.destination[i].$el.offsetTop)
        }
        this.destinationY[0]=0
        this.destinationY.push(Number.MAX_VALUE)

        // console.log(this.destinationY)
      },
      imgLoad(){
        this.$refs.scroll.refresh()
        // this.getDestination()
        debounce(this.getDestination(),10)
      },
      convey(index){
        // this.$refs.scroll.scroll.scrollToElement(this.destination[index].$el,1000)
        this.$refs.scroll.scrollTo(0,-this.destinationY[index],1000)
      },
      sendOrdinate(position){
        // console.log(position);
        for(let i=0;i<this.destinationY.length-1;i++){
          if(this.navIndex!=i){
            if(-position.y>=this.destinationY[i]&&-position.y<this.destinationY[i+1])
              this.navIndex=i
          }
        }
        this.listenBackShow(position)
        // console.log(this.backShow);
      },
      addGoods(){
        let goods={
          id:this.id,
          img:this.topImg[0],
          name:this.goods.title,
          desc:this.goods.discount,
          price:this.goods.newPrice
        }
        this.addCar(goods).then(res=>this.$toast.show(res,2000))
        // this.$store.dispatch('addGoods',goods).then(res=>console.log(res))
      },
      sendGoodToBuy(){
        let good={
          goodId:this.id,
          goodName:this.goods.title,
          img:this.topImg[0],
          name:this.goods.title,
          desc:this.goods.discount,
          price:this.goods.newPrice,
          num:this.num,
        }
        let sendGood=[]
        sendGood.push(good)
        window.sessionStorage.setItem("buyGood",JSON.stringify(sendGood))
        this.$bus.$emit("sendGoodToBuy",sendGood)
      }
    },
    components:{
      navBar,swiper,info,shop,scroll,show,
      goodTable,goodComment,recommend,bar
    },
    mixins:[itemLitsenerMixin,backTopMixin],
    created() {
      this.id=this.$route.query.id
      detailGetData(this.id).then((res)=>{
        // console.log(res)
        let data=res.result
        // console.log(data);
        this.data=res
        this.topImg=data.itemInfo.topImages
        this.goods=new Goods(data.itemInfo,data.columns,data.shopInfo.services)
        this.shop=new Shop(data.shopInfo)
        this.show=data.detailInfo
        this.paramInfo=new GoodsParam(data.itemParams.info,data.itemParams.rule)
        if(data.rate.cRate!==0){
          this.comment=data.rate.list[0]
        }
      })
      detailGetRecommend().then(res=>{
        this.recommend=res.data.list
      })
      this.$nextTick(()=>{
        //尽管使用此函数可以等待DOM渲染出来，但图片却没有加载完
         // this.getDestination()
      })
    },
    mounted() {
      let refresh=debounce(this.$refs.scroll.refresh,10)
      this.$bus.$on('detailImgLoadOver',()=>{   //事件总线获取事件
        refresh()
      })
    },
    updated() {
       // this.getDestination()
    },
    destroyed() {

    }
  }
</script>

<style scoped>
  #detail{
    position: relative;
    z-index: 2;
    background-color: white;
    height: 100vh;
  }
  .scroll{
    height:calc(100vh - 44px - 53px);
    overflow: hidden;
    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }
  .nav{
    position: relative;
    background-color: white;
    top: 0;
    left: 0;
    z-index: 3;
  }

</style>
